<template>
  <view>
    <u-navbar title="步数" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#222" back-icon-color="#222"></u-navbar>
    <view class="" style="margin: 28rpx; background: #fff; border-radius: 20rpx; padding-bottom: 34rpx" v-for="(i, k) in list" :key="k">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 39rpx 34rpx">
        <view class="">
          {{ i.value_two }}
        </view>
        <image src="https://wenzhen.fuerle168.com/static/shop/del.png" mode="" style="width: 32rpx; height: 32rpx" @tap="del(i.id)"></image>
      </view>
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 0 34rpx">
        <view class="" style="font-size: 34rpx">{{ i.value_one }}步</view>
        <view class="" style="font-size: 28rpx">
          {{ i.measure_time_text }}
        </view>
      </view>
    </view>
    <view class="" style="width: 100%; position: fixed; bottom: 0">
      <view class="btn" @tap="show = true">上传步数</view>
    </view>
    <u-modal v-model="show" :show-cancel-button="true" title="步数" width="660" @confirm="confirm">
      <!-- <view class="" style="font-size: 32rpx;padding: 0 68rpx;">
			 	选择就诊人
			 </view>
			 <view class="" style="margin: 28rpx 42rpx;background: #F8F8F8;height: 98rpx;border-radius: 10rpx;display: flex;align-items: center;justify-content: space-between;font-size: 32rpx;">
				 <view class="" style="padding-left: 26rpx;">
				 	马小跳
				 </view>
				 <view class="" style="padding-right: 28rpx;">
				 	<u-icon name="arrow-down"></u-icon>
				 </view>
			 </view> -->
      <view class="" style="font-size: 32rpx; padding: 0 68rpx; margin-bottom: 20rpx">填写步数</view>

      <view class="">
        <input
          type="text"
          placeholder="请输入步数"
          style="margin: 0 42rpx; height: 98rpx; background: #f8f8f8; border-radius: 10rpx; padding-left: 26rpx; font-size: 32rpx"
          v-model="num"
        />
      </view>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: {
        background: '#FFFFFF'
      },
      show: false,
      page: 1,
      id: null,
      list: [],
      num: ''
    };
  },
  methods: {
    weight() {
      this.api({
        url: '/api/healthy/getDataList',
        method: 'post',
        data: {
          page: this.page,
          type: this.id
        }
      }).then((res) => {
        this.list = this.list.concat(res.data);
        this.page++;
      });
    },
    confirm() {
      this.api({
        url: '/api/healthy/addDataSix',
        method: 'post',
        data: {
          value_one: this.num
        }
      }).then((res) => {
        this.page = 1;
        this.list = [];
        this.weight();
      });
    },
    del(e) {
      this.api({
        url: '/api/healthy/delDataSS',
        method: 'post',
        data: {
          id: e,
          type: this.id
        }
      }).then((res) => {
        this.page = 1;
        this.list = [];
        this.weight();
      });
    }
  },
  onLoad(op) {
    this.id = op.id;
    this.weight();
  }
};
</script>

<style>
page {
  background: #f8f8f8;
}
.btn {
  margin: 99rpx 115rpx;
  height: 80rpx;
  background: linear-gradient(180deg, #1a9eff, #0fb8ff);
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
  font-size: 32rpx;
  color: #fff;
}
</style>
